<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Position Test</title>
    <style>
        p.pos_fixed {
            position: fixed;
            top: 30px;
            right: 5px;
        }

        div.pos_top {
            width: 1000px;
            padding: 20px;
            border: 5px solid slategray;
            margin: 10px;
            position: relative;
            right: -150px;
        }

        p.absolute {
            position: absolute;
            top: -10px;
            left: 400px;
        }

        div.sticky {
            width: 200px;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #4CAF50;
        }

        div.overflow {
            background-color: #00FFFF;
            width: 150px;
            height: 150px;
            overflow: auto;
        }
    </style>
</head>

<body>

    <p class="pos_fixed">ATU 专业性培训</p>

    <div class="pos_top">

        <p class="absolute">这是一个绝对定位了的标题</p>

    </div>
    <p style="text-align:center;">上面的框是相对定位框。</p>

    <div class="sticky">我是粘性定位!</div>
    <p>尝试滚动页面。</p>
    <div style="padding-bottom:2000px">
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>
        <p>滚动我</p>
        <p>来回滚动我</p>

        <div class="overflow">
            当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
        </div>
    </div>

</body>

</html>